var id =1;

// function add2(){
// 	var name = document.getElementById("name1").value;
	
// }

function add(){
	var name = document.getElementById("name1").value;
	// alert(name)
	//获取单选框
	var rdsObj = document.getElementsByName("sex");
	var checkVal = null;
	for(var i=0;i<rdsObj.length;i++){
		if(rdsObj[i].checked){
			checkVal = rdsObj[i].nextSibling.nodeValue;
		}
	}
	// alert(checkVal)
	//获取复选框
	var hobbys = document.getElementsByName("hobby")
	var selectValue = "";
	for(var i=0;i<hobbys.length;i++){
		if(hobbys[i].checked){
			selectValue = selectValue + hobbys[i].value+" "; 
		}
	}
	// alert(selectValue)
	//获取下拉列表的值
	var place = document.getElementById("place")
	var index = place.selectedIndex;
	var placeValue = place.options[index].text;
	
	// alert(placeValue)
	var html = "<tr id ='tr"+id+"'>"
					+"<td id ='td1"+id+"'>"+ id++ +"</td>"
					+"<td id ='td2"+id+"'>"+ name +"</td>"
					+"<td id ='td3"+id+"'>"+ checkVal +"</td>"
					+"<td id ='td4"+id+"'>"+ selectValue +"</td>"
					+"<td id ='td5"+id+"'>"+ placeValue +"</td>"
					+"<td id ='td6"+id+"'><a href = 'javascript:' onclick = 'del(this)'>删除</a>&nbsp;<a href = 'javascript:' onclick = 'upd(this)'>修改</a></td>"
				+"</tr>"
	var tbody = document.getElementById("tbody")
	tbody.innerHTML += html;
}

// function del2(){
// 	if(confirm("是否删除")){
// 		var tr = document.getElementById("tr"+id);
// 		document.getElementById("tbody").removeChild(tr)
// 	}
// }

function del(obj){
	// alert(11)
	var tr = obj.parentNode.parentNode;
	if(confirm("是否删除？")){
		document.getElementById("tbody").removeChild(tr)
	}
}


// function updat(){
// 	var td2 = document.getElementById("td2"+id);
	
	
	
// }
//修改(先还原，再赋值)
function upd(obj){
	var tOperation = obj.parentNode;
	var tAddr = tOperation.previousSibling;
	var tHobby = tAddr.previousSibling;
	var tSex = tHobby.previousSibling;
	var tName = tSex.previousSibling;
	var tId = tName.previousSibling.innerHTML;
	
	
	var tr = obj.parentNode.parentNode;
	var td = tr.getElementsByTagName('td');
	var radioVal = td[2].innerText;
	var checkVal = td[3].innerText;
	var selectVal = td[4].innerText;
	// alert(td[2].innerText)
	// console.log(tId)
	tName.innerHTML="<input type = 'text' id = 'tN"+tId+"' value = '"+tName.innerHTML+"'/>";
	
	tSex.innerHTML="<label><input type='radio' name='tempsex"+tId+"' id='sex_id'  />男</label>"
			+"<label><input type='radio' name='tempsex"+tId+"' id='sex_id' />女</label>";
	//复现单选框的选中值
	var tempsex = document.getElementsByName('tempsex'+tId);
	if(radioVal=="男"){
		tempsex[0].checked=true;
	}else if(radioVal=="女"){
		tempsex[1].checked=true;
	}
	

	tHobby.innerHTML = "<input type='checkbox' name='temphobby"+tId+"' id='' value='健身' />健身"
		+"<input type='checkbox' name='temphobby"+tId+"' id='' value='篮球' />篮球"
		+"<input type='checkbox' name='temphobby"+tId+"' id='' value='跑步' />跑步"
	//复现多选框的选中值
	var str1 = checkVal.split(" ");
	var hobbys = document.getElementsByName('temphobby'+tId);
	for(var i =0;i<str1.length;i++){
		for(var j =0;j<hobbys.length;j++){
			if(hobbys[j].value==str1[i]){
				hobbys[j].checked = true;
			}
		}
	}
	
	tAddr.innerHTML = "<select id='tempplace"+tId+"'>"
			+"<option value=''>请选择</option>"
			+"<option value='山东'>山东</option>"
			+"<option value='北京'>北京</option>"
			+"<option value='河北'>河北</option>"
			+"<option value='全部' selected>全部</option>"
		+"</select>"
	//复现下拉列表的值
	var place = document.getElementById('tempplace'+tId);
	for(var i=0;i<place.options.length;i++){
		if(place.options[i].text==selectVal){
			place.options[i].selected = true;
		}
	}
	
	tOperation.innerHTML = "<a href = 'javascript:;'>保存</a>";
	
	tOperation.getElementsByTagName("a")[0].onclick = function(){
		tName.innerHTML = document.getElementById('tN'+tId).value;
		//获取修改的性别
		var radioValue = "";
		var sexVal = document.getElementsByName('tempsex'+tId);
		for(var i=0;i<sexVal.length;i++){
			if(sexVal[i].checked){
				radioValue = sexVal[i].nextSibling.nodeValue;
			}
		}
		// alert(radioValue)
		tSex.innerHTML = radioValue;
		//获取修改的兴趣
		var checkValue =""
		var hobbyVal = document.getElementsByName('temphobby'+tId)
		for(var i=0;i<hobbyVal.length;i++){
			if(hobbyVal[i].checked){
				checkValue = checkValue+hobbyVal[i].value+" ";
			}
		}
		tHobby.innerHTML = checkValue;
		//获取修改的地址
		var placeVal = document.getElementById('tempplace'+tId)
		var index = placeVal.selectedIndex;
		var placeValue = placeVal.options[index].text;
		// alert(placeValue)
		tAddr.innerHTML = placeValue;
		
		tOperation.innerHTML = "<td><a href = 'javascript:' onclick = 'del(this)'>删除</a>&nbsp;<a href = 'javascript:' onclick = 'upd(this)'>修改</a></td>"
	};
}
// function save(id){
	
// }

// function sele(){
	
// }

function sel(){
	var rows = document.getElementsByTagName("tr");
	var len = rows.length;
	for(var i =1;i<len;i++){
		rows[i].removeAttribute("style");
	}
	var name2 = document.getElementsByName("name2")[0].value;
	var addr2 = document.getElementsByName("addr2")[0].value;
	// console.log(name2);
	// console.log(addr2)
	if(name2=''||addr2==''){
		return;
	}
	for(var i=1;i<len;i++){
		var name = rows[i].cells[1].innerHTML;
		var addr = rows[i].cells[4].innerHTML;
		var b1 = (name2==""||name.indexOf(name2)>-1)
		var b2 = (addr2==""||addr==addr2);
		if(b1 && b2){
			rows[i].style.backgroundColor = "red";
		}
	}
	
	
	// var rows = document.getElementsByTagName("tr");
	// var len = rows.length;
	
	// for(var i =1;i<len;i++){
	// 	rows[i].removeAttribute('style');
	// }
	
	// var v2 = inputs[2].value;
	// if(v2==''){
	// 	return 
	// }
	// for(var i =1;i<len;i++){
	// 	var td = rows[i].cells[1].innerHTML
	// 	if(td.indexOf(v2)>-1){
	// 		rows[i].style.backgroundColor = 'green'
	// 	}
	// }
}